div > table

[raznodel]

 <div><table></table></div> 

Вот такая простая структура, но при сжатии страницы, таблица сжимается до минимальной ширины, а див продолжает сжиматься дальше, выглядит некрасиво - див имеет бакгроунд и он сжимается и становиться меньше таблицы. Замечено в браузерах: FF, IE8, Crome, Opera.

Кто сталкивался с подобной проблемой, как решали?

[psywalker]

Повесь фон на таблицу.

[raznodel]

Проблематично на самом деле фон сложный из 2х картинок, юзается 2 дива, и перекинуть его на таблицу не крайний вариант. Заставить див не сжиматься меньше таблицы есть возможность?

[buddah]

min-widht mim-height

[raznodel]

Я не знаю минимальный размеры таблицы - еще контент динамический, вообще таблица это менюшка, сделал спец ей а не li чтобы при сжатии не переваливались друг под друга итемы.

[psywalker]

Проблематично на самом деле фон сложный из 2х картинок, юзается 2 дива, и перекинуть его на таблицу не крайний вариант. Заставить див не сжиматься меньше таблицы есть возможность?

float: left?

[sigma77]

Проблематично на самом деле фон сложный из 2х картинок, юзается 2 дива, и перекинуть его на таблицу не крайний вариант. Заставить див не сжиматься меньше таблицы есть возможность?

float: left?

div {float: left;} или div {display: inline-block;} или div {display: table;} или динамически пересчитывать ширину таблицы и присваивать её диву.

[raznodel]

остается только флоа float:left; display в IE7 косячить будет. но черт, див теперь не тянется на 100%. width:100% не катит т.к. есть padding и margin есть способ ещё как то растянуть?

[sigma77]

остается только флоа float:left; display в IE7 косячить будет. но черт, див теперь не тянется на 100%. width:100% не катит т.к. есть padding и margin есть способ ещё как то растянуть?

вложи еще один див и ему уже задай float: left и width: 100%

[psywalker]

Оксан, а вот смотри, такая тема не пашет в Хроме например. Что я делаю не так?

http://jsfiddle.net/y7vRX/

[sigma77]

Оксан, а вот смотри, такая тема не пашет в Хроме например. Что я делаю не так?

http://jsfiddle.net/y7vRX/

Ну да, точно width: 100% не подходит, тогда див растянется только на ширину окна.

Так должно работать http://jsfiddle.net/y7vRX/1/

Upd. Или, наверное, даже лучше так http://jsfiddle.net/y7vRX/3/

Edited June 16, 2011 by sigma77

[psywalker]

Оксан, а вот смотри, такая тема не пашет в Хроме например. Что я делаю не так?

http://jsfiddle.net/y7vRX/

Ну да, точно width: 100% не подходит, тогда див растянется только на ширину окна.

Так должно работать http://jsfiddle.net/y7vRX/1/

Upd. Или, наверное, даже лучше так http://jsfiddle.net/y7vRX/3/

Спасибо Оксан, а ты могла бы объяснить, как работает этот приём?

Upd. Или, наверное, даже лучше так http://jsfiddle.net/y7vRX/3/

Чем лучше?

[sigma77]

Спасибо Оксан, а ты могла бы объяснить, как работает этот приём?

Тут дело в том как работает width: auto у плавающих элементов. У обычных блоков в потоке значение auto, если не заданы марджины и паддинги равно ширине родительского блока (грубо говоря 100%). У плавающего блока эта ширина будет равна ширине дочернего элемента. Если плавающему блоку задать ширину 100%, то он примет родительскую ширину, а она будет равна ширине окна браузера. Поэтому мы задаем min-width: 100%, чтобы он всегда занимал всю доступную ширину, и оставляем значение width: auto, чтобы если таблица будет шире, блок растянулся на её шинину.

Upd. Или, наверное, даже лучше так http://jsfiddle.net/y7vRX/3/

Чем лучше?

Не пропадает горизонтальный скролл при уменьшении размеров экрана.

Но вообще надо подумать, может еще есть оптимальней вариант. Тут уже сам макет смотреть надо.

Может там и таблицы нафиг не нужны

[psywalker]

Тут дело в том как работает width: auto у плавающих элементов. У обычных блоков в потоке значение auto, если не заданы марджины и паддинги равно ширине родительского блока (грубо говоря 100%). У плавающего блока эта ширина будет равна ширине дочернего элемента. Если плавающему блоку задать ширину 100%, то он примет родительскую ширину, а она будет равна ширине окна браузера. Поэтому мы задаем min-width: 100%, чтобы он всегда занимал всю доступную ширину, и оставляем значение width: auto, чтобы если таблица будет шире, блок растянулся на её шинину.

Ага, но смотри, ведь вот в этой ситуации откуда например .wrap знает ширину окна, если он растягивается на ширину родителя .outer, у которого ширина подгоняется под размер содержимого, а т.е. .wrap?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    * { margin: 0; padding: 0;}
	body { width: 100%; border: 1px solid #000; height: 500px;}
    table {

        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }
.outer { float: left;  padding: 20px; background: orange}
    .wrap { float: left; background:red; min-width: 100%}   
</style>
</head>

<body>
<div class="outer">
<div class="wrap">
    <table><tr><td> ksdjfksdjf sdkfjsd kdjf sdfjks ksj skfdjsksd jfkdsj sdkfskdlfj sdfkjsdfj dfjk sdfkj dsfkjdkf jskdjf sakjf ksdjfksdjfksdjf</td><td> ksdjfksdjf sdkfjsd kdjf sdfjks ksj skfdjsksd jfkdsj sdkfskdlfj sdfkjsdfj dfjk sdfkj dsfkjdkf jskdjf sakjf ksdjfksdjfksdjf</td><td> ksdjfksdjf sdkfjsd kdjf sdfjks ksj skfdjsksd jfkdsj sdkfskdlfj sdfkjsdfj dfjk sdfkj dsfkjdkf jskdjf sakjf ksdjfksdjfksdjf</td><td> ksdjfksdjf sdkfjsd kdjf sdfjks ksj skfdjsksd jfkdsj sdkfskdlfj sdfkjsdfj dfjk sdfkj dsfkjdkf jskdjf sakjf ksdjfksdjfksdjf</td><td> ksdjfksdjf sdkfjsd kdjf sdfjks ksj skfdjsksd jfkdsj sdkfskdlfj sdfkjsdfj dfjk sdfkj dsfkjdkf jskdjf sakjf ksdjfksdjfksdjf</td></tr></table>
</div>
</div>

</body>
</html>

Не пропадает горизонтальный скролл при уменьшении размеров экрана.

Но вообще надо подумать, может еще есть оптимальней вариант. Тут уже сам макет смотреть надо.

Может там и таблицы нафиг не нужны

Хм...вроде одно и тоже

[sigma77]

Ага, но смотри, ведь вот в этой ситуации откуда например .wrap знает ширину окна, если он растягивается на ширину родителя .outer, у которого ширина подгоняется под размер содержимого, а т.е. .wrap?

Ну а ты попробуй уменьшить количество контента http://jsfiddle.net/3zzqz/

Хм...вроде одно и тоже

Ты точно сравниваешь http://jsfiddle.net/y7vRX/1/ и http://jsfiddle.net/y7vRX/3/

Попробуй добавить контента и поуменьшать страницу.

[psywalker]

Ага, но смотри, ведь вот в этой ситуации откуда например .wrap знает ширину окна, если он растягивается на ширину родителя .outer, у которого ширина подгоняется под размер содержимого, а т.е. .wrap?

Ну а ты попробуй уменьшить количество контента http://jsfiddle.net/3zzqz/

Аа, т.е. выходит, что .wrap просто всегда растягивается на ширину своего контента, а .outer на ширину .wrap?

.outer { float: left;  padding: 20px; background: orange}
    .wrap { float: left; background:red; min-width: 100%} 

Upd. Тут ошибся, поэтому эту часть поста удалил.

[sigma77]

Аа, т.е. выходит, что .wrap просто всегда растягивается на ширину своего контента, а .outer на ширину .wrap?

Да

[psywalker]

Аа, т.е. выходит, что .wrap просто всегда растягивается на ширину своего контента, а .outer на ширину .wrap?

Да

Понял Оксан, спасибо тебе большое за разъяснение